<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/userInfo.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <title>授权账号管理</title>
</head>
<style>
    #userInfos select {
        border: 0!important;
        /*display: block;*/
        position: relative;
        min-height: 1.146667rem;
        line-height: 1.146667rem;
        white-space: nowrap;
        /*width: 100%;*/
        overflow: hidden;
        /*padding-right: .6rem;*/
        background-color: #eee;
        background: transparent!important;
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */
    }
</style>
<body class="all">
<div id="all">
    <div class="top" id="userInfo">
        <div>
            <button type="button" class="layui-btn" @click="adduser(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <!--<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</button>-->
            <button type="button" @click="exports" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出</button>
        </div>
    </div>
    <div class="tabs">
        <table cellpadding="0" cellspacing="0" id="userInfos">
            <tr style="font-weight: bold">
                <!--<td>序号</td>-->
                <td>操作</td>
                <td>员工姓名</td>
                <td>员工编号</td>
                <td>所属部门</td>
                <td>所属项目</td>
                <td>相关表单</td>
                <td>数据输入</td>
                <td>数据查询</td>
                <td>项目管理</td>
                <td>分类管理</td>
                <td>查询区域编辑授权</td>
                <td>密码设置</td>
            </tr>
            <tr v-for="(item, index) in arr" :key='index'>
                <td>
                    <span class="operation"  @click="adduser(2, item.id)" >编辑</span>
                    <!--<span class="operation" v-else @click="saves(item.id,index)">保存</span>-->
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.nickname}}</td>
                <td>{{item.username}}</td>
                <td>{{item.department_name}}</td>
                <td>{{item.project_name}}</td>
                <td>{{item.xiang}}</td>
                <td>{{item.xiang}}</td>
                <td>{{item.sect}}</td>
                <td >{{item.rule}}</td>
                <td >{{item.rules}}</td>
                <td>{{item.edit}}</td>
                <td>{{item.pass}}</td>
            </tr>
        </table>
    </div>
</div>
<div id="demo8"></div>
<div class="x-body" id="addopen" style="display: none;padding-top: 10px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="nickname" class="layui-form-label">
                <span class="x-red">*</span>员工姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="nickname" name="nickname" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <label for="data_ins" class="layui-form-label">
                <span class="x-red">*</span>数据输入
            </label>
            <div class="layui-input-inline">
                <select id="data_ins" name="data_ins" xm-select-show-count="2" xm-select="data_ins" class="valid">
                    <option value="1">产值计算表</option>
                    <option value="2">直接费</option>
                    <option value="3">专项措施费</option>
                    <option value="4">安全文明费</option>
                    <option value="5">项目管理人员工资</option>
                    <option value="6">社保费</option>
                    <option value="7">附加税</option>
                    <option value="8">固定资产摊销费</option>
                    <option value="9">经营管理费</option>
                    <option value="10">其他费用</option>
                    <option value="11">主表</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>员工编号
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" autocomplete="off"  name="username" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <label for="project_id" class="layui-form-label">
                <span class="x-red">*</span>相关项目
            </label>
            <div class="layui-input-inline">
                <select id="project_id" xm-select="project_id" xm-select-show-count="1" name="project_id" class="valid">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="data_sect" class="layui-form-label">
                <span class="x-red">*</span>数据查询
            </label>
            <div class="layui-input-inline">
                <select id="data_sect" xm-select="data_sect" name="data_sect" xm-select-show-count="2" class="valid">
                    <option value="1">单位时间总表</option>
                    <option value="2">产值计算表</option>
                    <option value="3">变动费</option>
                    <option value="4">固定费</option>
                </select>
            </div>
            <label for="project_rule" class="layui-form-label">
                <span class="x-red">*</span>项目管理
            </label>
            <div class="layui-input-inline">
                <select id="project_rule" xm-select="project_rule" xm-select-show-count="3" name="project_rule" class="valid">
                    <option value="1">项目立项</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="department_id" class="layui-form-label">
                <span class="x-red">*</span>所属部门
            </label>
            <div class="layui-input-inline">
                <select id="department_id" xm-select="department_id" xm-select-show-count="3" name="department_id" class="valid">

                </select>
            </div>
            <label for="class_rule" class="layui-form-label">
                <span class="x-red">*</span>分类管理
            </label>
            <div class="layui-input-inline">
                <select id="class_rule" xm-select="class_rule"  name="class_rule" xm-select-show-count="3" class="valid">
                    <option value="1">分类编号</option>
                    <option value="2">部门设置</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <label for="data_edit" class="layui-form-label">
                <span class="x-red">*</span>查询区域编辑授权
            </label>
            <div class="layui-input-inline">
                <select id="data_edit" xm-select="data_edit" name="data_edit" xm-select-show-count="3" class="valid">
                    <option value="1">单位时间总表</option>
                    <option value="2">产值计算表</option>
                    <option value="3">变动费</option>
                    <option value="4">固定费</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="data_edit" class="layui-form-label">
                授权账号管理
            </label>
            <div class="layui-input-inline">
                <select id="auto_group" xm-select="auto_group" name="auto_group" xm-select-show-count="1" class="valid">
                    <option value="1">授权账号管理</option>
                </select>
            </div>
            <label for="data_edit" class="layui-form-label">
                删除权限
            </label>
            <div class="layui-input-inline">
                <select id="dele_jurisd" xm-select="dele_jurisd" name="dele_jurisd" xm-select-show-count="2" class="valid">
                    <option value="1">产值计算表</option>
                    <option value="2">直接费</option>
                    <option value="3">专项措施费</option>
                    <option value="4">安全文明费</option>
                    <option value="5">项目管理人员工资</option>
                    <option value="6">社保费</option>
                    <option value="7">附加税</option>
                    <option value="8">固定资产摊销费</option>
                    <option value="9">经营管理费</option>
                    <option value="10">其他费用</option>
                    <option value="11">主表</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script src="../../layui/formSelects-v4.js"></script>
<script>
    layui.use(['laypage', 'layer', 'form'], function () {
        var laypage = layui.laypage,
            layer = layui.layer,
            form = layui.form,
            formSelects = layui.formSelects;
        $(function () {
            var arrs = JSON.parse(sessionStorage.getItem('department'));
            var ophtml = '';
            var ophtmls = '';
            var obj = {
                page: 1,
                limit: 99
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/index/projectselect', obj).done(function (res){
                    if(res.code == 1){
                        sessionStorage.setItem('projectselect', JSON.stringify(res.data.project)); //所有项目集合
                        var arr = res.data.project;
                        for (item in arr) {
                            ophtml += '<option value="' + arr[item].id + '">' + arr[item].name + '</option>'
                        }

                        $("#project_id").append(ophtml);
                        layui.formSelects.render();
                    }else{
                        layer.msg(res.msg, {time: 1000, icon: 2})
                    }
                })
            )
            for (item in arrs) {
                ophtmls += '<option value="' + arrs[item].id + '">' + arrs[item].name + '</option>'
            }
            $("#department_id").append(ophtmls);
            layui.form.render();
        })
        //自定义验证规则
        form.verify({
            nikename: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
        });
        //监听提交
        form.on('submit(add)', function (data) {
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            })
            var obj = {
                username: data.field.username,
                password: data.field.password,
                nickname: data.field.nickname,
                department_id: data.field.department_id,
                project_id: data.field.project_id,
                data_ins: data.field.data_ins,
                data_sect: data.field.data_sect,
                data_edit: data.field.data_edit,
                project_rule: data.field.project_rule,
                class_rule: data.field.class_rule,
                people_rule: data.field.auto_group,
                data_del: data.field.dele_jurisd
            }
            var url = '';
            if(vm.stus == 1){
                url = 'api/user/register';
            }else{
                obj.id = vm.tid;
                url = 'api/user/usereditdo';
            }
            $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                    if(res.code == 1){
                        vm.initData();
                        layui.layer.msg(res.msg, {time:1000, icon: 1})
                        layer.closeAll();
                        formSelects.render();
                    }else{
                        layui.layer.msg(res.msg, {time:1000, icon: 2})
                    }
                    layui.layer.close(load)
                })
            )
        })

    });

    var vm = new Vue({
        el: '#all',
        data: {
            token: '',
            project_id: sessionStorage.getItem('projectopt'),
            page: 1,
            limit: 12,
            arr: {},
            partmentarr : JSON.parse(sessionStorage.getItem('department')),  //部门
            projectarr: JSON.parse(sessionStorage.getItem('project')), //当前权限项目
            nickname: '', //员工昵称
            password: '',
            stus: 1, //判读新增或修改
            tid: '', //当前编辑id
            permissions:''
        },
        created: function () {
            this.token = JSON.parse(sessionStorage.getItem('userinfo')).token;
            this.initData();
        },
        methods: {
            //初始化数据
            initData: function () {
                var obj = {
                    project_id: sessionStorage.getItem('projectopt'),
                    page: this.page,
                    limit: 12
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/user/index', obj).done(function (res) {
                        if (res.code == 1) {
                            var data = res.data.list;
                            vm.arr = data;
                            if(vm.page == 1){
                                vm.initpage(res.data.count);
                            }
                        } else {
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            vm.initpage(0);
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                        layer.close(load)
                    })
                )
            },
            adduser : function(type, id){
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var title = ''
                    this.stus = type;
                    this.tid = id;
                    if (type == 2){
                        //编辑初始化数据
                        var obj = {
                            id: id
                        }
                        title = '编辑账号信息';
                        $.when(PUATTRBUTE.REQUESTFUN('api/user/useredit', obj).done(function(res){
                                if(res.code == 1){
                                    $("#nickname").val(res.data.nickname);
                                    $("#username").val(res.data.username);
                                    $("#password").val(res.data.pass);
                                    layui.formSelects.value('data_ins', res.data.data_ins.split(","));
                                    layui.formSelects.value('data_sect', res.data.data_sect.split(","));
                                    layui.formSelects.value('department_id', ((res.data.department_id).toString()).split(","));
                                    layui.formSelects.value('project_rule', res.data.project_rule.split(","));
                                    layui.formSelects.value('project_id', ((res.data.project_id).toString()).split(","));
                                    layui.formSelects.value('class_rule', ((res.data.class_rule).toString()).split(","));
                                    layui.formSelects.value('data_edit', ((res.data.data_edit).toString()).split(","));
                                    layui.formSelects.value('auto_group',res.data.people_rule.split(","));
                                    layui.formSelects.value('dele_jurisd',res.data.data_del.split(","));
                                }else{
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    }else {
                        title = '新增账号信息';
                        $("#nickname").val("");
                        $("#username").val("");
                        $("#password").val("");
                        layui.formSelects.render();
                    }
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', '500px'], //宽高
                        title: title,
                        content: $("#addopen")
                    });
                }
            },
            initpage: function (count) {
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: 12
                    ,jump: function(obj, first){
                        if(!first){
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            },
            //修改数据
//            saves:function (id,idx) {
//                var obj = {
//                    id: id,
//                    department_id: this.arr[idx].partmentselect,
//                    project_id: this.arr[idx].projectselect,
//                    data_ins: this.arr[idx].data_insse,
//                    data_sect: this.arr[idx].data_sectse,
//                    data_edit: this.arr[idx].dataedit,
//                    project_rule: this.arr[idx].rulese,
//                    class_rule: this.arr[idx].crulese
//                }
//                if(this.nickname != ''){
//                    obj.nickname = this.nickname;
//                }
//                if(this.password != ''){
//                    obj.password = this.password;
//                }
//                var load = layer.load(2, {
//                    shade: [0.6, '#fff'] //0.1透明度的白色背景
//                })
//                this.stus = 1;
//                $.when(PUATTRBUTE.REQUESTFUN('api/user/usereditdo', obj).done(function(res){
//                        layer.close(load);
//                        if(res.code == 1){
//                            this.$set(this.arr[idx], 'statusr', false);
//                            layer.msg(res.msg, {time: 1000, icon: 1})
//                        }else{
//                            layer.msg(res.msg, {time: 1000, icon: 2})
//                        }
//                    })
//                )
//            },
            //删除
            del: function (e) {
                var obj = {
                    id: e
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'] //按钮
                },function(){
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    $.when(PUATTRBUTE.REQUESTFUN('api/user/userdel', obj).done(function(res){
                            layer.close(load);
                            if(res.code == 1){
                                layer.msg(res.msg, {time: 1000, icon: 1})
                                vm.initData();
                            }else{
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                },function(){
                    layer.closeAll();
                });
            },
            exports: function () {
                if(vm.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var tableHtml = $('#userInfos');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "授权账号.xls";
                    urlA.click();
                }
            }
        }
    })
</script>